// ###### Mon Dec 13 11:04:02 CST 2021
//分别暴露
export const mixin={
    
    mounted() {
        //每秒钟刷新一下时间
        setInterval(() => {
            this.date= dayjs(Date.now()).format("YYYY年MM月DD日 HH:mm:ss")
        }, 1000);
        // console.log(this.$refs.Portrait_ul[0].style)
        // console.log(document.getElementsByClassName('Portrait')[0].style.height)
        // let oBox=document.getElementsByClassName('Portrait')[1]
        // alert(this.getElementStyle(oBox,"height"))
        // middle 中转变量
        //我方消息框上边距
        let Portrait_oBox=this.$refs.Portrait_li
        // let =document.getElementsByClassName('Portrait')
        var Portrait=[]
        var number=0
        for (var i=0;i<Portrait_oBox.length;i++){
            let oppositeSpan=document.getElementsByClassName('oppositeSpan')[i]

            //获取高度
            let middle = this.getElementStyle(Portrait_oBox[i],"height")
            
            //获取文本内容之后获取最后一位
            let oppositeSpanText=oppositeSpan.innerHTML
            // console.log(oppositeSpanText)
            let index=oppositeSpanText.lastIndexOf("\_")
            let str = oppositeSpanText.substring(index+1,oppositeSpanText.length)
            if(str == 0){
                middle=middle.substring(0,middle.length-2)
                number+=parseInt(middle)
            }else if(str == 1){
                Portrait.push(number+'px')
                Portrait.push(5+'px')
                Portrait.push(middle)
            }
        }
        
        for (var i=0;i<Portrait.length;i++){
            document.getElementsByClassName('my')[i].style.marginTop=Portrait[i]
        }



        //对方消息框上边距

        // let my_oBox=document.getElementsByClassName('my')
        let my_oBox=this.$refs.my_li
        var my=[]
        var number2=0
        for(var i=0;i<my_oBox.length;i++){
            let mySpan=document.getElementsByClassName('mySpan')[i]
            //获取高度
            let middle = this.getElementStyle(my_oBox[i],"height")
            
            //获取文本内容之后获取最后一位
            let mySpanText=mySpan.innerHTML
            // console.log(oppositeSpanText)
            let index=mySpanText.lastIndexOf("\_")
            let str = mySpanText.substring(index+1,mySpanText.length)
            if(str == 0){
                middle=middle.substring(0,middle.length-2)
                number2+=parseInt(middle)
            }else if(str == 1){
                my.push(middle)
                my.push(5+'px')
                my.push(number2+'px')
            }
            // console.log(my)
        }


        for(var i=1;i<my.length;i++){
            document.getElementsByClassName('Portrait')[i].style.marginTop=my[i]
        }

        //现在有两个问题
        // 1.不确定谁会是第一条消息
        // 2.连续发消息的上边距不确定
            // 可以通过文本最后的最后一个数字判断
    },methods: {
        //获取CSS属性的方法，解决了获取不到外部的css
        getElementStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr]
            }else{
                return getComputedStyle(obj,false)[attr]
            }
        }
    },
}

